<!--
  * 实时预览
-->
<template>
    <div class="video-box">
        <a-row type="flex" justify="center">
            <a-col :span="8" v-for="(item,index) in imageList">
                <a-card >
                  <p >{{item.camName}}</p>
                    <a-image
                        width="100%"
                        :src="item.lastPicture"
                    />
                    <div >
                      
                      <p >{{item.lastPlateNum}}</p>
                      <!-- <a-button type="primary" @click="open(item.camIp)">开闸</a-button> -->
                    </div>
                    
                </a-card>
            </a-col>
        </a-row>
    </div>
    <div class="video">
      <div>
      <a-row>
            <a-col :span="12" v-for="(item,index) in imageList" style="padding: 1px;">
              <LivePlayer :videoUrl="item.streamAddress" fluent :controls="false" autoplay live stretch alt="无信号"></LivePlayer>
                  
                  <!-- <a-input v-model:value="item.videoUrl" placeholder="url" /> -->
            </a-col>
        </a-row>
      </div>
    </div>
    <!-- <div class="table-box">
        <a-table
        :scroll="{ x: 1300 }"
        size="small"
        :dataSource="tableData"
        :columns="columns"
        rowKey="enterpriseId"
        :pagination="false"
        :loading="tableLoading"
        bordered
        >
        <template #bodyCell="{ column, record, text,index }">
            <template v-if="column.dataIndex === 'index'">
              {{ index+1  }}
            </template>
            <template v-if="column.dataIndex === 'isPass'">
            {{ text==1?'通行':'禁止'  }}
            </template>
        </template>
        </a-table>
    </div> -->
    <!-- <a-upload
    v-model:file-list="fileList"
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    accept=".jpeg"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload> -->
</template>
  <script setup>
    import { reactive, ref, onMounted,onUnmounted } from 'vue';
    import { message } from 'ant-design-vue';
    import {previewApi} from '/@/api/licensePlate/preview'
    import { smartSentry } from '/@/lib/smart-sentry';
    // 视频流播放器
    import LivePlayer from '@liveqing/liveplayer-v3' 
    // const imageUrl = ref(null)
    // const fileList = ref([])
  
    const livePlayerList = ref([
      {
        videoUrl:'',
        name:''
      },
      {
        videoUrl:'',
        name:''
      },
      {
        videoUrl:'',
        name:''
      },
      {
        videoUrl:'',
        name:''
      },
    ])
  
    const imageList = ref([])
    //获取预览4张图
     let getImageUrl = () => {
      try{
        // let res = await previewApi.newest();
        previewApi.newest().then(res=>{
          let list = [...res.data]
          list.map(item=>{
            item.lastPicture = '/pic'+item.lastPicture.split('/pic')[1]
          })
          imageList.value = list
        })
      }catch (e) {
        smartSentry.captureError(e);
      }
     }
    //开闸
    let open = (ip)=>{
      previewApi.open({host:ip}).then(res=>{
          message.success('开闸成功');
        }).catch((e)=>{
          smartSentry.captureError(e);
        })
    }
    const intervalTime = 5000; // 轮询间隔时间，单位毫秒
    let intervalId = null;
    // 预加载数据
    onMounted(()=>{
      getImageUrl();
      intervalId = setInterval(()=>{
        getImageUrl();
      }, intervalTime);
      
    });
    onUnmounted(() => {
      if (intervalId) {
        clearInterval(intervalId); // 清除轮询
      }
    })
  </script>
  